<template>
  <div class="page">
    <a-divider class="divider"/>
    <a-descriptions title="角色信息" style="margin-top: 8px;">
      <a-descriptions-item label="名称">{{ role.name }}</a-descriptions-item>
      <a-descriptions-item label="角色描述">{{ role.description }}</a-descriptions-item>
    </a-descriptions>
    <a-divider class="divider" />
    <a-form layout="inline" :model="queryModel" v-if="searchBox" style="margin-top: 8px">
      <a-form-item label="关键字">
        <a-input v-model:value="queryModel.keyWord" placeholder="请输入搜索关键字" @click="query"/>
      </a-form-item>
      <a-space>
        <a-button type="primary" @click="query">查询</a-button>
        <a-button @click="resetQuery">重置</a-button>
      </a-space>
    </a-form>
    <div class="functionBox">
      <a-space class="right">
        <a-button size="small" shape="circle" :icon="h(ReloadOutlined)" @click="query()" />
        <a-button size="small" shape="circle" :icon="h(SearchOutlined)" @click="() => searchBox = !searchBox" />
      </a-space>
    </div>
    <a-tree
        ref="treeRef"
        v-model:checkedKeys="selectedKeys"
        :fieldNames="{children:'children', title:'menuName', key:'id' }"
        default-expand-all
        checkable
        :height="300"
        :autoExpandParent="true"
        :tree-data="treeMenu"
    >
    </a-tree>
    <div class="functionSubmit">
      <a-button type="primary" @click="submit" :disabled="selectedKeys.length == 0">确认授权</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">

    import { h, onMounted, ref , watch , defineProps } from "vue";
    import { ReloadOutlined, SearchOutlined } from "@ant-design/icons-vue";
    import { menuIdsApi } from "@/controller/RoleApi"
    import useMenu from "@/hooks/useMenu";
    import type { Query } from "@/interface/Query";
    import type { Role } from "@/interface/Role";
    import type {RoleMenu} from "@/interface/RoleMenu";

    const {
      queryModel  , searchBox , treeMenu , treeNodeMenu
    } = useMenu();

    onMounted(()=> {
      treeNodeMenu();
      menuIds(parent.role.id);
    });

    function menuIds(id? : string) {
      menuIdsApi(id).then(res => {
          if (res.code == 200) {
            selectedKeys.value = res.data;
          }
      });
    }

    interface Prop {
      role: Role;
    }

    let parent = withDefaults(defineProps<Prop>(), {});
    let emit = defineEmits(['sendRoleMenu']);


    function resetQuery() {
      queryModel.value = {} as Query;

      treeNodeMenu();
    }



    const selectedKeys = ref<string[]>([]);


    function query() {
      if (queryModel.value.keyWord) {
        treeNodeMenu(queryModel.value.keyWord);
      }
    }


    let roleMenu = ref({ } as RoleMenu);
    function submit() {
      roleMenu.value.roleId = parent.role.id;
      roleMenu.value.menuIds = selectedKeys.value;
      emit('sendRoleMenu', roleMenu.value);
    }



</script>

<style scoped lang="scss">
    .page {
      height: 542px;
    }
    .functionBox {
      margin: 18px 0 12px 0;
      display: flex;
      justify-content: flex-end;
    }
    .pagination {
      margin: 8px 0;
      display: flex;
      justify-content: end;
    }
    .functionSubmit {
      display: flex;
      margin: 18px 0 0 0;
      justify-content: center;
    }
    .divider {
      margin: 0 !important;
    }
</style>
